import { Link } from 'react-router-dom';
import { list } from '@/assets/data';

const Home = () => {
  return (
    <div className="text-white bg-[#141430] pb-[48px] sm:pb-[160px]">
      <section className="bg-[url(/images/banner-bg.jpg)] bg-no-repeat bg-[length:240%] sm:bg-[length:100%] bg-[center_top] sm:bg-center aspect-[1920/940] pt-[72px] sm:pt-[108px] flex justify-center items-end">
        <div className="sm:w-[1200px] mx-auto relative pt-[240px] sm:pt-0">
          <div className="sm:w-[800px] mx-auto pb-[20px] px-[24px] sm:px-0">
            <p className="font-[PoppinsBold] uppercase text-white text-[28px] sm:text-[68px] sm:leading-[80px] mb-[10px] sm:mb-[20px] text-center">FateStone</p>
            <p className="text-white font-[PoppinsRegular] text-sm sm:text-[24px] sm:leading-[30px] pb-[10px] sm:pb-[30px] text-center font-light mb-[20px]">FateStone是一个综合AI智能体游戏孵化器，我们赋予FateStone的初衷和使命是：通过游戏孵化器的引导，为全球电竞爱好者、玩家、团队提供一个去中心化、透明、可互动的生态，让全球电竞爱好者、玩家、团队跟随并加入web3链上游戏赛道，FATE充当桥梁，致力于将现实世界资产（RWA）与电竞相结合，推动电竞行业的可持续发展与创新。</p>
            <button className="block w-[180px] h-[48px] bg-gradient-to-r from-[#15BFFD] to-[#9C37FD] to-50% text-white font-bold text-[16px] mx-auto uppercase">more</button>
          </div>
          <i className="hidden sm:block size-[276px] absolute left-[-100px] bottom-[-150px] bg-[url(/images/vector.png)] bg-no-repeat bg-[length:100%] bg-center"></i>
        </div>
      </section>
      
      <section className="pt-0 sm:pt-[100px] px-[24px] sm:px-0">
        <div className="sm:w-[1200px] mx-auto relative">
          <div className="w-full sm:w-[840px] sm:h-[132px] relative mx-auto flex items-center justify-center mb-[3px]">
            <p className="font-[AlimamaShuHeiTiBold] uppercase text-[18px] sm:text-[42px] leading-[60px] sm:leading-[100px] relative z-[1]">热门游戏</p>
            <svg xmlns="http://www.w3.org/2000/svg" className="mx-auto select-none absolute inset-0 aspect-[840/132] w-full flex">
              <text
                className="stroke-[#381559] stroke-[2px] uppercase text-[44px] sm:text-[99px] font-bold font-[PoppinsBold] fill-[#141430]"
                x="0"
                y="0"
                alignment-baseline="text-before-edge" 
                text-anchor="start"
              >
                Popular Games
              </text>
            </svg>
          </div>
          <ul className="grid grid-cols-1 sm:grid-cols-3 gap-[24px]" id='game-list'>
            {list.map((item: any) => (
              <li key={item.id}>
                <Link className='block p-[20px] bg-[url(/images/subtract.png)] bg-no-repeat bg-[length:100%_100%] bg-center' to={`/detail/${item.id}`}>
                  <img src={item.img} alt="" className="mb-[25px]" />
                  <p className="uppercase text-[28px] font-[PoppinsBold] mb-[5px] font-bold">{item.name}</p>
                  <p className="uppercase text-[16px] font-[PoppinsBold] text-[#797989] mb-[30px]">{item.description}</p>
                  <ul className="flex items-center space-x-[26px]">
                    {item.links.map((link: any, index: number) => (
                      <li key={index}><Link target='_blank' onClick={(e) => e.stopPropagation()} className="size-[32px] flex items-center justify-center" to={link.url}><img src={link.icon} className="size-[19px]" alt="" /></Link></li>
                    ))}
                  </ul>
                </Link>
              </li>
            ))}
          </ul>
          <i className="size-[283px] absolute right-[-400px] bottom-[-80px] rotate-90 bg-[url(/images/vector.png)] bg-no-repeat bg-[length:100%] bg-center"></i>
        </div>
      </section>
    </div>
  )
}

export default Home